<template>
    <statusBar></statusBar>
    <view class="title">找回密码</view>

    <view class="content">
        <view class="inputs">
            <view class="item">
                <view class="itemTitle">手机号</view>
                <view class="inputBox">
                    <input type="tel" :maxlength="11" v-model.trim="loginInfomation.phone" placeholder="请输入手机号" />
                </view>
            </view>
            <view class="item">
                <view class="itemTitle">验证码</view>
                <view class="inputBox">
                    <input type="text" :maxlength="6" v-model.trim="loginInfomation.code" placeholder="请输入验证码" />
                    <view class="getCode" :class="timer && 'gray'" @click="getVerificationCode">{{ VerificationCodeButtonText }}</view>
                </view>
            </view>
            <view class="tipsText" @click="phoneCall">未收到短信验证码?请联系我们</view>

            <!-- <view class="item">
                <view class="itemTitle">验证码</view>
                <view class="inputBox">
                    <input type="text" :maxlength="4" v-model.trim="loginInfomation.code" placeholder="请输入验证码" />
                    <view class="verificationCode">
                        <jp-verification-literalness
                            ref="literalness"
                            :contentWidth="80"
                            :contentHeight="40"
                            @getCode="getPicCode"
                            :securityCode="PICcode"
                        ></jp-verification-literalness>
                    </view>
                </view>
            </view> -->

            <view class="item">
                <view class="itemTitle">密码</view>
                <view class="inputBox">
                    <input v-if="loginInfomation.passwordShow1" :maxlength="12" v-model.trim="loginInfomation.password" placeholder="6-12位字母数字组合" />
                    <input v-else type="password" :maxlength="12" v-model.trim="loginInfomation.password" placeholder="6-12位字母数字组合" />
                    <view class="showIcon" @click="loginInfomation.passwordShow1 = !loginInfomation.passwordShow1">
                        <image v-if="loginInfomation.passwordShow1" src="/static/common/icon_show.png"></image>
                        <image v-else src="/static/common/icon_display.png"></image>
                    </view>
                </view>
            </view>

            <view class="item">
                <view class="itemTitle">再次输入</view>
                <view class="inputBox">
                    <input v-if="loginInfomation.passwordShow2" :maxlength="12" v-model.trim="loginInfomation.password2" placeholder="6-12位字母数字组合" />
                    <input v-else type="password" :maxlength="12" v-model.trim="loginInfomation.password2" placeholder="6-12位字母数字组合" />
                    <view class="showIcon" @click="loginInfomation.passwordShow2 = !loginInfomation.passwordShow2">
                        <image v-if="loginInfomation.passwordShow2" src="/static/common/icon_show.png"></image>
                        <image v-else src="/static/common/icon_display.png"></image>
                    </view>
                </view>
            </view>
        </view>

        <view class="submit" @click="SubmitEvent">确定</view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { userApis } from '@/utils/apis';
import { checkStrLengthIsNotZero } from '@/utils/utils';

const phoneCall = () => {
    let phone = '19147817902';
    const res = uni.getSystemInfoSync();
    // ios系统默认有个模态框
    if (res.platform == 'ios') {
        uni.makePhoneCall({
            phoneNumber: phone
        });
    } else {
        //安卓手机手动设置一个showActionSheet
        uni.showActionSheet({
            itemList: [phone, '呼叫'],
            success: function (res) {
                if (res.tapIndex == 1) {
                    uni.makePhoneCall({
                        phoneNumber: phone
                    });
                }
            }
        });
    }
};

//用户填写内容
let loginInfomation = reactive({
    phone: '',
    password: '',
    password2: '',
    code: '',
    passwordShow1: false,
    passwordShow2: false
});
// onLoad(() => {
//     getPicCode();
// });
// const literalness = ref();
// const PICcode = ref('');
// const getPicCode = async () => {
//     const res = await userApis.getValidateCode({
//         randomStr: Date.now()
//     });
//     PICcode.value = res.data.code;
// };

// 获取验证码
const VerificationCodeTime = ref(60);
const isCountingDown = ref(false);
const VerificationCodeButtonText = ref('获取验证码');
const timer = ref(null);
const getVerificationCode = () => {
    if (timer.value) return;
    userApis
        .getVerificationCode({
            phone: loginInfomation.phone,
            type: '4'
        })
        .then((res) => {
            isCountingDown.value = true;
            VerificationCodeButtonText.value = `${--VerificationCodeTime.value}秒后重新获取`;
            timer.value = setInterval(() => {
                VerificationCodeTime.value--;
                if (VerificationCodeTime.value <= 0) {
                    clearInterval(timer.value);
                    VerificationCodeTime.value = 60;
                    timer.value = null;
                    isCountingDown.value = false;
                    VerificationCodeButtonText.value = '获取验证码';
                } else {
                    VerificationCodeButtonText.value = `${VerificationCodeTime.value}秒后重新获取`;
                }
            }, 1000);
        });
};

const SubmitEvent = async () => {
    if (!checkStrLengthIsNotZero(loginInfomation.phone) || loginInfomation.phone.length != 11) {
        uni.showToast({
            icon: 'none',
            title: '请填写正确手机号'
        });
        return;
    }

    if (!checkStrLengthIsNotZero(loginInfomation.code)) {
        uni.showToast({
            icon: 'none',
            title: '请填写验证码'
        });
        return;
    }

    // if (!literalness.value.verification(loginInfomation.code)) {
    //     uni.showToast({
    //         icon: 'none',
    //         title: '验证码不正确'
    //     });
    //     loginInfomation.code = '';
    //     getPicCode();
    //     return;
    // }

    if (loginInfomation.password.length < 6) {
        uni.showToast({
            icon: 'none',
            title: '请填写6-12位密码'
        });
        return;
    }

    if (loginInfomation.password !== loginInfomation.password2) {
        uni.showToast({
            icon: 'none',
            title: '两次填写的密码不一致'
        });
        return;
    }

    await userApis.resetPassword({ phone: loginInfomation.phone, code: loginInfomation.code, password: loginInfomation.password });

    uni.showToast({
        icon: 'none',
        title: '密码设置成功，请重新登录'
    });

    setTimeout(() => {
        uni.navigateBack();
    }, 1500);
};
</script>

<style lang="scss" scoped>
.title {
    padding: 80rpx 78rpx 110rpx;
    font-weight: 800;
    font-size: 48rpx;
    color: #111111;
    line-height: 66rpx;
}

.content {
    padding: 0 78rpx;
    .inputs {
        width: 100%;
        .item {
            width: 100%;
            height: 92rpx;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            border-bottom: 2rpx solid #f2f2f2;

            .itemTitle {
                width: 130rpx;
                font-size: 28rpx;
                line-height: 1;
                color: #393939;
                border-right: 2rpx solid #ccc;
            }
            .inputBox {
                flex: 1;
                padding-left: 12rpx;
                height: 92rpx;
                display: flex;
                align-items: center;
                input {
                    flex: 1;
                    height: 40rpx;
                    font-size: 28rpx;
                    color: #393939;
                    line-height: 40rpx;
                    padding: 0 20rpx;

                    &::placeholder {
                        color: #999999;
                    }
                }

                .getCode {
                    font-size: 28rpx;
                    color: #333333;
                    height: 40rpx;
                    padding: 0 20rpx;
                    &.gray {
                        color: #999;
                    }
                }

                .showIcon {
                    width: 40rpx;
                    height: 40rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    image {
                        width: 32rpx;
                        height: 32rpx;
                    }
                }
            }
        }
    }

    .forgetPassword {
        font-size: 28rpx;
        line-height: 1;
        height: 28rpx;
        color: #393939;
        text-align: right;
    }

    .submit {
        width: 100%;
        height: 78rpx;
        background: #2c72ff;
        border-radius: 54rpx;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 78rpx;
        text-align: center;
        margin-top: 80rpx;
    }
}

.tipsText {
    text-align: right;
    font-size: 20rpx;
    color: #999999;
    margin-bottom: 10rpx;
}
</style>
